<template>
	<view class="rider-order">
		<RiderNavBar title="我的订单"/>
		<view class="content" v-if="orderList.length">
			<OrderItem 
				page="order" 
				:orderInfo="item"
				:index="index"
				v-for="(item, index) in orderList" 
				:key="item" 
				@rush="changeStatus" 
			/>
		</view>
		<Empty txt="暂时没有可配送订单~" v-else/>
		<TabBar tabType="rider" :currentPage="1" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import TabBar from '@/components/TabBar.vue';
	import Empty from '@/components/Empty.vue';
	import RiderNavBar from '../components/RiderNavBar.vue';
	import OrderItem from '../components/OrderItem.vue';
	import { GetMyOrderList } from '@/service/rider.js'
	import { useAddressStore } from '@/store/index.js'
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const orderList = ref([])
	const getOrderList = () => {
		const { lonlat } = useAddressStore()
		const params = {
			latitude: lonlat.latitude,
			longitude: lonlat.longitude
		}
		GetMyOrderList(params).then(res => {
			total.value = res.total
			orderList.value.push(...res.data)
			console.log(res.data);
		})
	}
	const itemIndex = (i) => {
		console.log(i);
	}
	const changeStatus = (info) => {
		const { index, status } = info
		if(status==4) return orderList.value.splice(index, 1)
		orderList.value[index].rider_status = status
	}
	onLoad(() => {
		getOrderList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getOrderList()
	})
</script>

<style lang="scss" scoped>
	.rider-order {
		.content {
			padding: 10px 12px 50px;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 68px);
			padding-bottom: calc(env(safe-area-inset-bottom) + 68px);
		}
	}
</style>
